<script setup lang="ts">
import type { TodoItemsVO } from '#/api/hm/todoItems/model';

import { computed } from 'vue';

import { CheckCircleOutlined, CloseCircleOutlined, SyncOutlined, UserOutlined } from '@ant-design/icons-vue';

interface Props {
  data: TodoItemsVO;
}

const props = defineProps<Props>();

// 流程节点定义
const flowNodes = computed(() => {
  const nodes = [
    {
      id: 'submit',
      label: '发起',
      user: props.data.submitterName || '-',
      time: props.data.createTime,
      status: 'completed', // completed | processing | pending | rejected
      icon: UserOutlined,
    },
    {
      id: 'approve',
      label: '审核',
      user: props.data.approverName || '-',
      time: props.data.todoCompletionTime,
      status: getApprovalStatus(),
      icon: UserOutlined,
    },
  ];
  return nodes;
});

// 获取审核状态
function getApprovalStatus() {
  if (props.data.status === '1') {
    return 'completed'; // 已完成
  } else if (props.data.status === '2') {
    return 'rejected'; // 已驳回
  } else if (props.data.status === '0') {
    return 'processing'; // 处理中
  }
  return 'pending'; // 待处理
}

// 获取状态文本
function getStatusText(status: string) {
  const statusMap: Record<string, string> = {
    completed: '已完成',
    processing: '处理中',
    pending: '待处理',
    rejected: '已驳回',
  };
  return statusMap[status] || status;
}

// 获取状态颜色
function getStatusColor(status: string) {
  const colorMap: Record<string, string> = {
    completed: '#52c41a',
    processing: '#1890ff',
    pending: '#d9d9d9',
    rejected: '#ff4d4f',
  };
  return colorMap[status] || '#d9d9d9';
}

// 获取状态图标
function getStatusIcon(status: string) {
  if (status === 'completed') return CheckCircleOutlined;
  if (status === 'rejected') return CloseCircleOutlined;
  if (status === 'processing') return SyncOutlined;
  return UserOutlined;
}
</script>

<template>
  <div class="approval-flow">
    <div class="flow-container">
      <div
        v-for="(node, index) in flowNodes"
        :key="node.id"
        class="flow-node-wrapper"
      >
        <!-- 流程节点 -->
        <div class="flow-node">
          <!-- 节点图标 -->
          <div
            class="node-icon"
            :style="{ borderColor: getStatusColor(node.status), background: node.status === 'completed' || node.status === 'rejected' ? getStatusColor(node.status) : '#fff' }"
          >
            <component
              :is="getStatusIcon(node.status)"
              :style="{
                fontSize: '24px',
                color: node.status === 'completed' || node.status === 'rejected' ? '#fff' : getStatusColor(node.status)
              }"
            />
          </div>

          <!-- 节点信息 -->
          <div class="node-content">
            <div class="node-label">{{ node.label }}</div>
            <div class="node-user">
              <UserOutlined style="margin-right: 4px" />
              {{ node.user }}
            </div>
            <div v-if="node.time" class="node-time">
              {{ node.time }}
            </div>
            <a-tag :color="getStatusColor(node.status)" class="node-status">
              {{ getStatusText(node.status) }}
            </a-tag>
          </div>
        </div>

        <!-- 连接线 -->
        <div
          v-if="index < flowNodes.length - 1"
          class="flow-line"
          :style="{
            background: flowNodes[index + 1].status === 'completed' || flowNodes[index + 1].status === 'rejected'
              ? getStatusColor(flowNodes[index + 1].status)
              : '#d9d9d9'
          }"
        ></div>
      </div>
    </div>

    <!-- 流程说明 -->
    <div class="flow-legend">
      <a-space>
        <span class="legend-item">
          <CheckCircleOutlined style="color: #52c41a; margin-right: 4px" />
          已完成
        </span>
        <span class="legend-item">
          <SyncOutlined style="color: #1890ff; margin-right: 4px" />
          处理中
        </span>
        <span class="legend-item">
          <CloseCircleOutlined style="color: #ff4d4f; margin-right: 4px" />
          已驳回
        </span>
        <span class="legend-item">
          <UserOutlined style="color: #d9d9d9; margin-right: 4px" />
          待处理
        </span>
      </a-space>
    </div>
  </div>
</template>

<style scoped>
.approval-flow {
  padding: 24px;
  background: #fafafa;
  border-radius: 8px;
}

.flow-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 0;
  min-height: 200px;
}

.flow-node-wrapper {
  display: flex;
  align-items: center;
}

.flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 180px;
  padding: 0 16px;
}

.node-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.node-content {
  text-align: center;
}

.node-label {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 8px;
}

.node-user {
  font-size: 14px;
  color: #595959;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.node-time {
  font-size: 12px;
  color: #8c8c8c;
  margin-bottom: 8px;
}

.node-status {
  font-size: 12px;
  margin-top: 4px;
}

.flow-line {
  height: 3px;
  width: 80px;
  margin: 0 -16px;
  margin-top: -80px;
  transition: all 0.3s ease;
}

.flow-legend {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e8e8e8;
  text-align: center;
}

.legend-item {
  font-size: 14px;
  color: #595959;
  display: inline-flex;
  align-items: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .flow-container {
    flex-direction: column;
    align-items: center;
  }

  .flow-node-wrapper {
    flex-direction: column;
  }

  .flow-line {
    width: 3px;
    height: 60px;
    margin: 0;
    margin-left: 27px;
    margin-top: -12px;
    margin-bottom: -12px;
  }

  .flow-node {
    min-width: 100%;
  }
}
</style>
